<template>
  <div id="aa">
    <div class="square-box" ref="bigBox">
        <div class="front">
            <img :src="url" alt="" />
        </div>
        <div class="back">
            {{text}}
        </div>
    </div>
    <div id="bb"  @mouseover.prevent="rot" @mouseout.prevent="rotout"></div>
  </div>
</template>

<script>
export default {
    props:{
        text:String,
        url:String
    },
  // import引入的组件需要注入到对象中才能使用
  components: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    rot(){
            this.$refs.bigBox.style.cssText = `transform: rotateY(180deg)`
            this.$refs.bigBox.addEventListener('transtionend',function(){
                this.$refs.bigBox.style.cssText = `transform: rotateY(180deg)`
            })
        // this.$refs.bigBox.animate({ "transform": "rotateY(180deg)" }, 500);
        // setTimeout(() => {
            // this.$refs.bigBox.style.cssText = `transform: rotateY(180deg)`
        // }, 480);
    },
    rotout(){
        this.$refs.bigBox.style.cssText = `transform: rotateY(0deg)`
        this.$refs.bigBox.addEventListener('transtionend',function(){
            this.$refs.bigBox.style.cssText = `transform: rotateY(0deg)`
        })
    }
  }
}
</script>
<style lang='scss' scoped>

#aa{
    width:100%;
    position: relative;
}
#bb{
    width: 350px;
    height: 450px;
    margin-top: 25px;
    position: absolute;
    top: 0%;
    background-color: rgba($color: #000000, $alpha:0);
}
.square-box {
    // width: 33%;
    transition:all 0.8s;
    display: flex;
    height: 500px;
    box-sizing: border-box;
    position: relative;
    transform-style: preserve-3d;
    /*设置动画 三者分别为：动画名 执行一次时间 执行方式*/
    /* animation: rotateanimation 5s ease; */
    /* animation-iteration-count: infinite; */
    /*令动画无限执行下去*/
    /* animation-timing-function: linear; */
    /*匀速*/
    // margin:300px auto;
}

.square-box>div {
    position: absolute;
}
.square-box>.front {
    position: relative;
    top: 50%;
    left: 50%;
    height: 450px;
    width: 350px;
    transform: translateZ(50px) translateX(-50%) translateY(-50%);
    // background: red;
    img{
        width:100%;
        height:100%;
    }
}
.square-box>.back {
    text-align: center;
    color: white;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 300px;
    transform: translateZ(0px) translateX(-50%) translateY(-50%) rotateY(-180deg);
    background: rgba($color: #000000, $alpha: .5);

}
</style>
